<template>
  <div class="page-wapper">
    <!-- 我的任务 -->
    <!-- <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><i class="el-icon-lx-copy"></i> 我的任务</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div> -->
    <div class="container">
      <!-- type="card" -->
      <el-tabs v-model="currentTaskStatus">
        <el-tab-pane
          v-for="item in taskStatus"
          :key="item.status"
          :label="item.title"
          :name="item.status"
        ></el-tab-pane>
      </el-tabs>

      <!-- <el-table :data="state.recycle" :show-header="false" style="width: 100%">
        <el-table-column>
          <template #default="scope">
            <span class="message-title">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" width="150"></el-table-column>
        <el-table-column width="120">
          <template #default="scope">
            <el-button @click="handleRestore(scope.$index)">还原</el-button>
          </template>
        </el-table-column>
      </el-table> -->

      <div class="table_box f_1">
        <vxe-table
          v-loading="tableLoading"
          :data="tableData"
          :sort-config="{ remote: true }"
          :menu-config="{}"
          :checkbox-config="{ checkField: 'checked', trigger: 'row' }"
          :row-style="rowStyle"
          ref="xTable"
          resizable
          align="center"
          border
          height="100%"
          show-overflow="tooltip"
          highlight-hover-row
          highlight-current-row
          class="xTable"
        >
          <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>

          <vxe-column
            type="seq"
            title="序号"
            width="60"
            fixed="left"
          ></vxe-column>

          <vxe-column title="所属模块" width="220">
            <template #default="{ row }">
              <span v-for="(cell, j) in row.moduleNamesArr" :key="j">
                【{{ cell }}】
              </span>
            </template>
          </vxe-column>

          <vxe-column
            field="taskTitle"
            title="任务标题"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="taskDesc"
            title="任务说明"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="taskStatus"
            title="任务状态"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="taskRemark"
            title="任务备注"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="taskPriority"
            title="任务优先级"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="taskDifficulty"
            title="任务难度"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="demandUserName"
            title="需求负责人"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="demandCompleteTime"
            title="需求完成时间"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="demandStatus"
            title="需求状态"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="demandAuditTime"
            title="需求评审时间"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="workUserName"
            title="开发负责人"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="workPlanCompleteTime"
            title="开发计划完成时间"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="workProgress"
            title="开发完成程度"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="workPlanDays"
            title="开发预估工作量（天）"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="workRemark"
            title="开发备注"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="workActualCompleteTime"
            title="开发实际完成时间"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="workActualDays"
            title="开发实际投入时间（天）"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="asNeedTest"
            title="是否需要测试"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="asPassDevTest"
            title="是否通过冒烟测试"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="testDesc"
            title="测试说明"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="testUserName"
            title="测试负责人"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="testStartTime"
            title="测试开始时间"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="testOneProgress"
            title="测试一轮进度"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="testTwoProgress"
            title="测试二轮进度"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="testBackProgress"
            title="测试回归进度"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <vxe-column
            field="testRemark"
            title="测试备注"
            min-width="200"
            align="left"
            header-align="center"
          ></vxe-column>

          <!-- <vxe-column title="难度" width="80">
            <template #default="{ row }">
              <div>{{ row.workProgress }} %</div>
            </template>
          </vxe-column> -->

          <vxe-column #default="{ row }" width="160" title="操作" fixed="right">
            <div>
              <el-button
                size="mini"
                type="text"
                @click.stop="editTableDataMethod(row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click.stop="deleteTableDataMethod(row)"
                >删除</el-button
              >
            </div>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  name: "TaskTable",
  setup() {
    const currentTaskStatus = ref("2");

    const xTable = ref(null);
    const tableData = ref([]);
    const tableLoading = ref(false);
    const pagenationData = reactive({
      current: 1,
      size: 15,
      total: 0,
    });
    const taskStatus = reactive([
      {
        title: "进行中",
        status: "2",
        count: 0,
      },
      {
        title: "已完成",
        status: "3",
        count: 0,
      },
      {
        title: "未开始",
        status: "1",
        count: 0,
      },
      {
        title: "已关闭",
        status: "0",
        count: 0,
      },
    ]);

    const handleRead = (index) => {};
    const handleDel = (index) => {};
    const handleRestore = (index) => {};

    // 动态设置单元行样式
    const rowStyle = ({ rowIndex }) => {
      if (tableData.value[rowIndex].checked) {
        return {
          backgroundColor: "pink",
          // backgroundColor: 'lightblue',
          // color: '#ffffff'
        };
      }
    };

    return {
      taskStatus,
      currentTaskStatus,
      xTable,
      tableData,
      tableLoading,
      handleRead,
      handleDel,
      handleRestore,
      rowStyle,
    };
  },
};
</script>

<style>
.message-title {
  cursor: pointer;
}
.handle-row {
  margin-top: 30px;
}
</style>
